<template>
  <div class="layout container">
    <div class="left-side">
      <div class="side-bar">
        <div class="title">
          <svg
            data-v-60ecf32f=""
            viewBox="0 0 16 12"
            class="air-craft css-1dtzbno"
          >
            <path
              d="M15.6386295,4.17014918 C16.454219,4.39885202 15.6343208,5.07824066 15.6343208,5.07824066 L12.8711365,7.09359077 L4.27181047,2.64580413 C4.27181047,2.64580413 10.0809335,6.55511522 11.8533103,7.76666817 L5.86501964,11.7253113 C4.91770244,12.2710516 4.67094307,11.8350769 4.67094307,11.8350769 L4.25489009,10.97071 L0.0325132718,0.704758608 C-0.125784343,0.348173789 0.320384239,-0.0596727945 0.798575886,0.00727624935 L15.6386295,4.17014918 Z M10.2454612,9.59252937 C10.230576,9.58092963 10.2174075,9.56728156 10.2063473,9.55199119 C10.14161,9.46249359 10.1616822,9.3374615 10.2511798,9.27272421 L11.7512731,8.18764499 C11.7871922,8.16166319 11.8307257,8.14835156 11.875033,8.14980177 C11.9854308,8.15341518 12.0719967,8.24583954 12.0683833,8.35623737 L11.9964408,10.5542479 C11.995057,10.5965255 11.9803043,10.6372757 11.9543032,10.6706411 C11.8864076,10.757767 11.7607379,10.7733563 11.673612,10.7054607 L10.2454612,9.59252937 Z"
              id="纸飞机"
              transform="translate(8.000000, 6.000000) scale(-1, 1) translate(-8.000000, -6.000000) "
            ></path>
          </svg>
          <div>消息中心</div>
        </div>
        <ul class="list">
          <li class="item">
            <a href="#"> 我的消息 </a>
          </li>
          <li class="item">
            <a href="#"> 系统通知 </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-side">
      <div class="side-top">
        <div class="title">
          <div>
            <span>我的消息</span>
          </div>
        </div>
      </div>
      <div class="side-bottom">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 64px);
  margin: 0 auto;
  width: 1143px;
  max-width: 1143px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;

  .left-side {
    width: 140px;
    min-width: 140px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);

    .side-bar {
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      color: #666;

      .title {
        height: 62px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #333;

        svg {
          margin-right: 10px;
          fill: currentcolor;
          width: 1em;
          height: 1em;
        }
      }

      .list {
        margin: 0;
        padding: 0 0 0 20px;

        .item {
          height: 40px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          position: relative;
          color: #6b757b;

          &::before {
            content: "\25cf";
            line-height: 20px;
            width: 8px;
            height: 20px;
            text-align: center;
          }

          a {
            padding-left: 10px;
            line-height: 40px;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
          }
        }
      }
    }
  }

  .right-side {
    width: calc(100% - 140px);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    .side-top {
      padding: 10px 10px 0;
      z-index: 11;

      .title {
        height: 42px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
        box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
        -ms-flex-negative: 0;
        flex-shrink: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 16px;
        font-size: 15px;
        color: #666;
        border-radius: 4px;
      }
    }

    .side-bottom {
      padding: 10px;
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: calc(100% - 66px);
      overflow: hidden;
    }
  }
}
</style>
